<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>employee_list</title>
</head>
<body>
    <h2>employee_list</h2>
    <hr>
    <table id="datatable" border="1" cellpadding="0" cellspacing="0" style="text-align: center">
        <tr>
            <!--colspan="5": 表示5列表格被合并成1列-->
            <th colspan="5">Employee Info</th>
        </tr>
        <tr>
            <th>id</th>
            <th>name</th>
            <th>email</th>
            <th>gender</th>
            <th>
                options
                <a th:href="@{/toadd}">add</a>
            </th>
        </tr>
        <tr th:each="employee : ${employees}">
            <td th:text="${employee.id}"></td>
            <td th:text="${employee.name}"></td>
            <td th:text="${employee.email}"></td>
            <td th:text="${employee.gender}"></td>
            <td>
                <a @click="deleteEmployee" th:href="@{'/employee/'+${employee.id}}">Delete</a>
                <a th:href="@{'/employee/'+${employee.id}}">Update</a>
            </td>
        </tr>
    </table>

    <!--restfull put/delete-->
    <form id="deleteForm" method="post">
        <input type="hidden" name="_method" value="delete">
    </form>

    <!--引入远程的vue.js-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.0-beta.7/vue.cjs.min.js"></script>
    <!--删除员工-->
    <script type="text/javascript">
        var vue = new Vue({
            el:"#datatable",
            methods:{
                deleteEmployee:function (event) {
                    var deleteForm = document.getElementById("deleteForm");
                    deleteForm.action = event.target.href;
                    deleteForm.submit();
                    event.preventDefault();
                }
            }
        })
    </script>
</body>
</html>